<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link href="css/base.css" rel="stylesheet">
    <link href="css/head.css" rel="stylesheet">

    <link href="css/recharge.css" rel="stylesheet">
</head>
<body>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/Utils.js"></script>
    <script src="js/head.js"></script>

    <script src="js/mock.js"></script>
    <script src="mock/recharge.js"></script>
    
    <div class="head"></div>
    <div class="nav_head"></div>


    <div class="main">
        <h2 style="text-align: center;">充值</h2>

        <div style="width: 50%; text-align: center;">
            账户余额: ￥<span id="myamount"></span>
        </div>
        <div class="msg" style="color:red"></div>
        <div style="width:50%;">
            <input type="text" id="amount" placeholder="请输入充值金额">
        </div>
        <div style="width: 50%;" class="button" id="recharge">充值</div>
    </div>
    <script>
        let user = hasLogin()

        if (!user) {
            alert("请先登录")
            location.href = 'login.html'
        }

        let username = user.username
        let data = {
            username
        }

        data = JSON.stringify(data)

        $.ajax({
            data,
            'url' : baseUrl+'/get_amount.php',
            'type' : 'POST',
            'success' : function(res){
                if(typeof(res) == 'string')
                    res = JSON.parse(res)

                if(res.code == 200){
                    $('#myamount').text(res.data.amount)
                }

                else alert("查询余额失败")
            }
        })

        $('document').ready(function(){
            $('#recharge').click(function(){
                let amount = $('#amount').val()

                amount = Number(amount)

                if(Number.isNaN(amount)){
                    $('.msg').text('请输入数字')
                    return
                }

                else if(amount.length < 0 || amount == ""){
                    $('.msg').text('请输入金额')
                    return
                }

                else if(amount <= 0){
                    $('.msg').text('金额必须大于0')
                    return
                }

                $('.msg').text("")
                
              
                let username = user.username

                let data = {
                    username,
                    amount
                }

                data = JSON.stringify(data)
                $.ajax({
                    data,
                    url: baseUrl+'/recharge.php',
                    type:'POST',
                    success:function(res){
                        if(typeof(res) == 'string'){
                            res = JSON.parse(res)
                        }

                        if(res.code == 200){
                            alert(res.msg)
                            location.href="recharge.html"
                        }else{
                            alert(res.msg)
                        }
                    }
                })
            })
        })
    </script>
</body>
</html>